<template>
  <div class="w h box-b p8 b-f">
    <div class="w m-b2">
      <el-button type="primary" @click="getDataList">查询</el-button>
      <el-button type="primary" @click="appendRole({ parentId: 0 })">添加角色</el-button>
    </div>
    <div style="height:calc(100% - 60px)" class="w">
      <el-table :data="tableData" row-key="id" height="100%" border default-expand-all>
        <el-table-column prop="name" label="权限名称" width="140px" sortable />
        <!-- <el-table-column prop="code" label="关键码" width="140px" sortable /> -->
        <el-table-column prop="menuIds" label="权限菜单" sortable>
          <template #default="{ row }">
            {{ row.menuLabels }}
          </template>
        </el-table-column>
        <el-table-column label="编辑" width="220px">
          <template #default="{ row }">
            <el-button type="text" @click="setRoleMenu(row)">设置权菜单</el-button>
            <el-button type="text" @click="appendRole(row, true)">编辑</el-button>
            <el-button type="text" @click="deleteRole(row)" class="c-w">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import frameProperty from '@/mixins/frame-property'
import { ElIconRender } from '@/importComponents'
import { RequestCode } from '@/server/base'
import { Role } from '@/apis/role/index'
import { Menu } from '@/apis/menu/index'
export default {
  name: '菜单设置',
  mixins: [frameProperty],
  components: {
    ElIconRender
  },
  data() {
    return {
      tableData: [],
      menuTableData: [],
      listLoading: false
    }
  },
  methods: {
    getMenuDataList() {
      this.listLoading = true
      Menu.list()
        .then((res: RequestCode) => {
          this.menuTableData = res.data
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getMenuLabels(array: any[]) {
      const arr = array.map(item => {
        if (item.meta) {
          const { label } = eval(`(${item.meta})`)
          return { labels: label, menuIds: item.id };
        }
        return { labels: [], menuIds: [] }
      })
      return { labels: arr.map(item => item.labels), menuIds: arr.map(item => item.menuIds) }
    },

    getMenuByIds(menuIds: string) {
      if (!menuIds) {
        return ''
      }
      const menuId = typeof menuIds == 'string' ? menuIds.split(',') : menuIds;
      return this.menuTableData.filter((item: { id: string | number }) =>
        menuId.includes(item.id + '')
      )
    },

    getDataList() {
      this.listLoading = true
      Role.list()
        .then((res: RequestCode) => {
          this.tableData = res.data.map((item: { meta?: string, menus: any, menuIds?: string[] | number | [], menuLabels?: string }) => {
            const { labels, menuIds } = this.getMenuLabels(item.menus);
            item.menuLabels = labels.join(',');
            item.menuIds = menuIds;
            console.log('label,ids',item.menuLabels.length,item.menuIds.length);
            return item;
          })
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    setRoleMenu(row: any) {
      this.dialogPagePush({
        name: 'roleMenuCheck',
        params: {
          row,
        }
      });
    },
    appendRole(row: any, isEdit?: boolean) {
      this.dialogPagePush({
        name: 'roleEdit',
        params: {
          isEdit,
          row
        }
      })
    },
    deleteRole(row: { id: number | string }) {
      if (!row.id) {
        return
      }
      this.$confirm('确定删除吗', '提示')
        .then(res => {
          Role.removeById({ id: row.id }).then((result: RequestCode) => {
            this.getDataList()
          })
        })
        .catch(e => { })
    }
  },
  created() {
    this.getMenuDataList()
    this.getDataList()
  }
}
</script>

<style lang="scss" scoped></style>